<template>
  <div class="view-container">
    <div class="filter-container">
      <el-form
        :inline="true"
        :model="filterData"
        label-position="right"
        size="small"
        class="filter-form-inline"
        label-width="100px"
      >
        <el-row
          :gutter="40"
          style="margin-left: 0px; margin-right: 0px"
        >
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%;padding-left:0px"
          >
            <el-form-item
              label="配送商状态"
              style="width: 100%"
            >
              <el-select
                v-model="filterData.disStatus"
                style="width: 100%"
                placeholder="全部"
                @change="refreshList"
              >
                <el-option
                  label="全部"
                  :value="''"
                />
                <el-option
                  v-for="(item,index) in distributorStatusOption.filter(p => p.value!=='-1'&&p.value!=='1'&&p.value!=='5')"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="所在地区"
              style="width: 100%"
            >
              <el-cascader
                ref="cascader"
                v-model="filterData.area"
                :popper-append-to-body="false"
                style="width: 100%;"
                :options="citys"
                placeholder="请选择所在地区"
                :props="{ expandTrigger: 'hover', label: 'regionName', value:'regionCode' }"
                clearable
                @change="areaChange"
              />
            </el-form-item>
          </el-col>
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="关键字"
              style="width: 100%"
            >
              <el-input
                v-model="filterData.keyWord"
                clearable
                placeholder="输入配送商名称、编号、详细地址"
              >
                <template
                  v-if="!filterData.keyWord"
                  #suffix
                >
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="输入配送商名称、编号、详细地址"
                    placement="top"
                  >
                    <i class="iconfont icon-wenhao main-color" />
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item style="width: 100%">
              <more-search-btn v-model:is-more="isMore" />
            </el-form-item>
          </el-col>
          <el-col
            :span="4"
            style="min-width: 170px;"
          >
            <el-form-item style="width: 100%">
              <el-button
                class="border-btn"
                @click="resetFilter"
              >重置</el-button>
              <el-button
                type="primary"
                class="main-btn"
                @click="refreshList"
              >搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          v-if="isMore"
          :gutter="40"
          style="margin-left: 0px; margin-right: 0px"
        >
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="负责职员"
              style="width: 100%"
            >
              <el-select
                v-model="filterData.userId"
                clearable
                style="width: 100%"
                placeholder="负责职员"
                @change="refreshList"
              >
                <el-option
                  v-for="(item,index) in userListOption"
                  :key="index"
                  :label="item.realName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="创建时间"
              style="width: 100%"
            >
              <date-range-picker
                v-model:date="filterData.date"
                style="width: 100%"
                type="daterange"
                clearable
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="handlDateChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div
      class="main-content"
      style="padding-top: 0px;"
    >
      <div class="list-container">
        <!--
          <table-tools>
            <template #left>
              <el-button
                class="main-btn"
                size="small"
                type="primary"
                @click="create"
              >新建</el-button>
            </template>
          </table-tools>
        -->
        <table-view
          header-cell-class-name="table-header"
          :data="listData"
          border
          :cell-style="cellStyle"
          :visible="isMore"
          @row-click="rowClick"
        >
          <el-table-column
            prop="distributeNo"
            label="配送商编号"
            fixed="left"
            :width="140"
            show-overflow-tooltip
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="distributeName"
            label="配送商名称"
            fixed="left"
            header-align="center"
            :min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            :min-width="160"
            show-overflow-tooltip
            prop="region"
            label="企业所在地区"
            header-align="center"
          >
            <template #default="scope">
              <span v-if="scope.row.provinceName">{{ scope.row.provinceName }}</span>
              <span v-if="scope.row.cityName"> / {{ scope.row.cityName }}</span>
              <span v-if="scope.row.areaName"> / {{ scope.row.areaName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :width="130"
            show-overflow-tooltip
            prop="creatorName"
            label="创建人"
            align="center"
            header-align="center"
          >
            <template #default="scope">
              <span> {{ scope.row.creatorName||'无' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="创建时间"
            :width="150"
            show-overflow-tooltip
            header-align="center"
            align="center"
            sortable
          >
            <template #default="scope">
              <span> {{ dateFormat('yyyy-mm-dd HH:MM', scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :width="120"
            show-overflow-tooltip
            prop="userName"
            label="负责职员"
            align="center"
            header-align="center"
          />
          <el-table-column
            label="配送商状态"
            :min-width="120"
            show-overflow-tooltip
            header-align="center"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <div
                class="status-container"
                style="line-height: 20px;"
              >
                <div class="status">{{ getLabel('distributor_status',scope.row.disStatus) }}</div>
                <div v-if="scope.row.disStatus==='2'">
                  <div
                    v-if="scope.row.isDistributeServer"
                    class="flow-status-color"
                  >[ 无配送服务 ]</div>
                  <div
                    v-if="scope.row.isDistributeTerminal"
                    class="flow-status-color"
                  >[ 无配送终端 ]</div>
                  <div
                    v-if="scope.row.isChange"
                    class="flow-status-color"
                  >[ 变更审核中 ]</div>
                  <div
                    v-if="scope.row.isQualification"
                    class="flow-status-color"
                  >[ 资质审核中 ]</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            header-align="center"
            :min-width="100"
          >
            <template #default="scope">
              <!--
                <el-button
                  v-if="scope.row.disStatus==='-1'"
                  type="text"
                  @click="editOperation(scope.row)"
                >编辑</el-button>
                <el-button
                  v-if="scope.row.disStatus==='2'"
                  type="text"
                  @click="endOperation(scope.row)"
                >终止合作</el-button>
                <el-button
                  v-if="scope.row.disStatus==='2'"
                  type="text"
                  class="danger"
                  @click="cancelOperation(scope.row)"
                >注销企业</el-button>
                <el-button
                  v-if="scope.row.disStatus==='2'&&!scope.row.isChange"
                  type="text"
                  @click="changeOperation(scope.row)"
                >变更信息</el-button>
                <el-button
                  v-if="scope.row.disStatus==='-1'"
                  type="text"
                  class="danger"
                  @click="deleteOperation(scope.row)"
                >删除</el-button>
              -->
              <el-button
                v-auth="{v: ['crm:distributor:contractedDistributor:completeFiles'], bool: scope.row.disStatus==='2'&&!scope.row.isQualification}"
                type="text"
                @click="updateFiles(scope.row)"
              >完善资质</el-button>
            </template>
          </el-table-column>
        </table-view>
        <Pagination
          v-model:page="filterData.page"
          v-model:limit="filterData.pageSize"
          style="display: flex; justify-content: flex-end"
          :total="total"
          @pagination="getList"
        />
      </div>

    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue'
import { useRouter } from 'vue-router'
import { crmStore } from '@CRM/store'
import area from '@/utils/area.js'

export default defineComponent({
  setup() {
    const api = inject('api')
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    var total = ref(0)
    var reactiveData = reactive({
      distributorStatusOption:
        crmStore.getters['dictionary/getDictionary']['distributor_status'] ||
        [],
      userListOption: [],
      citys: area,
      filterData: {
        isJc: true,
        disStatus: '',
        userId: '',
        keyWord: '',
        area: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        date: [],
        startTime: null,
        endTime: null,
        page: 1,
        pageSize: 20,
      },
      listData: [],
      isMore: false,
      defaultTime: [
        new Date(2000, 1, 1, 0, 0, 0).getTime(),
        new Date(2000, 2, 1, 23, 59, 59),
      ],
    })
    const cellStyle = (row) => {
      if (row.column.label === '操作') return
      return 'cursor: pointer;'
    }
    const rowClick = (row, column, event) => {
      console.log(row, column, column.label, event)
      if (column.label === '操作') return
      router.push({
        name: 'distributorsDetail',
        query: {
          id: row.id,
        },
      })
    }
    const create = () => {
      router.push({
        name: 'distributorsCreate',
        query: {
          types: 'create',
        },
      })
    }
    // 编辑
    const editOperation = (row) => {
      router.push({
        name: 'distributorsCreate',
        query: {
          types: 'edit',
          distributorId: row.id,
        },
      })
    }
    // 变更信息
    const changeOperation = (row) => {
      router.push({
        name: 'distributorsCreate',
        query: {
          types: 'update',
          distributorId: row.id,
        },
      })
    }
    // 完善资质
    const updateFiles = (row) => {
      router.push({
        name: 'distributorsFileUpdate',
        query: {
          distributorId: row.id,
        },
      })
    }
    // 删除
    const deleteOperation = (row) => {
      currentInstance.proxy
        .alertBox({
          message: '删除配送商后，数据不可恢复，确认删除？',
          title: '删除',
        })
        .then(() => {
          api.distributors
            .DISTRIBUTORS_DELETE({
              id: row.id,
            })
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                getList()
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // 终止合作
    const endOperation = (row) => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认终止合作？',
          title: '终止合作',
        })
        .then(() => {
          api.distributors
            .DISTRIBUTORS_END({
              id: row.id,
            })
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                getList()
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // 注销
    const cancelOperation = (row) => {
      currentInstance.proxy
        .alertBox({
          message: '注销配送后，该配送商将不可用且状态不可恢复，确认注销？',
          title: '注销企业',
        })
        .then(() => {
          api.distributors
            .DISTRIBUTORS_CANCEL({
              id: row.id,
            })
            .then((res) => {
              if (res.code) {
                currentInstance.proxy.customMessage({
                  type: 'error',
                  message: res.msg,
                })
              } else {
                getList()
              }
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    const getList = (row) => {
      console.log('列表')
      api.distributors
        .DISTRIBUTORS_LIST(reactiveData.filterData)
        .then((res) => {
          if (res.code === 0) {
            reactiveData.listData = res.data.list || []
            total.value = res.data.total
          }
        })
    }
    // 获取职员列表
    const getStaffList = () => {
      api.common.STAFF_PEOPLE_LIST({ status: 1 }).then((res) => {
        if (res.code === 0) {
          reactiveData.userListOption = res.data || []
        }
      })
    }
    const areaChange = (val) => {
      if (val && val.length) {
        reactiveData.filterData.provinceCode = val[0]
        reactiveData.filterData.cityCode = val[1]
        reactiveData.filterData.areaCode = val[2]
      } else {
        reactiveData.filterData.provinceCode = ''
        reactiveData.filterData.cityCode = ''
        reactiveData.filterData.areaCode = ''
      }
      getList()
    }
    // 时间范围变化
    const handlDateChange = (val) => {
      console.log(val)
      console.log(reactiveData.filterData.date)
      if (val && val.length) {
        reactiveData.filterData.startTime = val[0]
        reactiveData.filterData.endTime = val[1]
      } else {
        reactiveData.filterData.startTime = null
        reactiveData.filterData.endTime = null
      }
      getList()
    }
    const resetFilter = () => {
      reactiveData.filterData = {
        isJc: true,
        disStatus: '',
        userId: '',
        keyWord: '',
        area: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        date: [],
        startTime: null,
        endTime: null,
        page: 1,
        pageSize: 20,
      }
      getList()
    }

    // 更新列表
    const refreshList = () => {
      reactiveData.filterData.page = 1
      getList()
    }

    onMounted(() => {
      getList()
      getStaffList()
    })

    return {
      total,
      ...toRefs(reactiveData),
      cellStyle,
      rowClick,
      getList,
      create,
      editOperation,
      deleteOperation,
      endOperation,
      cancelOperation,
      areaChange,
      handlDateChange,
      refreshList,
      resetFilter,
      changeOperation,
      updateFiles,
    }
  },
})
</script>

